import { useTranslation } from 'react-i18next';
import moment from 'moment';
import {
  Grid,
  Typography,
  Box,
  useTheme
} from '@mui/material';

// Icons
import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
import DescriptionIcon from '@mui/icons-material/Description';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import PendingIcon from '@mui/icons-material/Pending';
import LaunchIcon from '@mui/icons-material/Launch';
import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import PaymentsIcon from '@mui/icons-material/Payment';

// Styled Components
import {
  StyledPaper,
  StyledAppButton
} from 'components/objects/StyledComponents';

/**
 * PaymentHistory component that displays invoice data in grid view
 * 
 * @param {Object} props
 * @param {Array} props.invoicesData - Array of invoice data objects
 * @param {string} props.currency - Currency code for formatting
 * @param {Function} props.formatMoney - Utility function to format currency
 */
const PaymentHistory = ({
  invoicesData = [],
  currency = 'USD',
  formatMoney
}) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const isDarkMode = theme.palette.mode === 'dark';

  // Filter invoices to only show paid or open ones
  const filteredInvoices = invoicesData.filter(invoice => 
    invoice.status === "paid" || invoice.status === "open"
  );

  // Format date from Unix timestamp
  const formatDate = (unixTimestamp) => {
    return moment.unix(unixTimestamp).format("DD/MM/YYYY");
  };

  // Info row component to avoid repetition
  const InfoRow = ({ icon, label, value }) => (
    <Box 
      sx={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center',
        py: 1,
        borderBottom: isDarkMode 
          ? '1px solid rgba(255, 255, 255, 0.05)' 
          : '1px solid rgba(0, 0, 0, 0.05)'
      }}
    >
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        {icon}
        <Typography variant="subtitle2" sx={{ ml: 1 }}>{label}</Typography>
      </Box>
      <Typography>{value}</Typography>
    </Box>
  );

  return (
    <Grid item xs={12}>
      <StyledPaper darkMode={isDarkMode} sx={{ p: 3 }}>
        {/* Payment History Header */}
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
          <ReceiptLongIcon 
            color="primary" 
            sx={{ fontSize: 32, mr: 2 }}
          />
          <Typography variant="h5" component="h1">
            {t("dashboardPage.paymentHistory")}
          </Typography>
        </Box>
        
        {/* Grid View */}
        <Grid container spacing={2}>
          {filteredInvoices.map((invoice, i) => (
            <Grid item xs={12} md={6} lg={4} key={`grid-${i}`}>
              <StyledPaper 
                darkMode={isDarkMode}
                sx={{ 
                  p: 2, 
                  height: '100%',
                  border: isDarkMode 
                    ? '1px solid rgba(0, 255, 242, 0.15)' 
                    : '1px solid rgba(0, 0, 0, 0.1)'
                }}
              >
                <InfoRow 
                  icon={<DescriptionIcon sx={{ fontSize: 20 }} />}
                  label={t("dashboardPage.paymentId")}
                  value={invoice.number}
                />
                
                <InfoRow 
                  icon={
                    invoice.paid ? (
                      <CheckCircleIcon color="success" sx={{ fontSize: 20 }} />
                    ) : (
                      <PendingIcon color="warning" sx={{ fontSize: 20 }} />
                    )
                  }
                  label={t("dashboardPage.status")}
                  value={invoice.paid ? t("dashboardPage.paid") : t("dashboardPage.toPay")}
                />
                
                <InfoRow 
                  icon={<CalendarTodayIcon sx={{ fontSize: 20 }} />}
                  label={t("dashboardPage.date")}
                  value={formatDate(invoice.created)}
                />
                
                <InfoRow 
                  icon={<PaymentsIcon sx={{ fontSize: 20 }} />}
                  label={t("dashboardPage.total")}
                  value={formatMoney("it", currency, invoice.total / 100)}
                />
                
                {invoice.hosted_invoice_url && invoice.status === "open" && (
                  <Box sx={{ mt: 2 }}>
                    <StyledAppButton
                      darkMode={isDarkMode}
                      component="a"
                      href={invoice.hosted_invoice_url}
                      target="_blank"
                      rel="noreferrer"
                      fullWidth
                      variant="outlined"
                      startIcon={<LaunchIcon />}
                      sx={{ py: 1 }}
                    >
                      {t("dashboardPage.toPay")}
                    </StyledAppButton>
                  </Box>
                )}
              </StyledPaper>
            </Grid>
          ))}
        </Grid>
      </StyledPaper>
    </Grid>
  );
};

export default PaymentHistory;